﻿@section Styles{
    <style>
        body {
            background-color: #f0f2f5 !important;
        }
    </style>
}

@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindBack"]' id="hidden_isFindBack" />
    <script src="~/services/Framework/SysMenu/indexService.js"></script>
}
<div id="app" v-cloak class="p-15">

    <el-row :gutter="20">
        <el-col :xs="24" :sm="10" :md="5" :lg="5" :xl="5">

            <el-card class="box-card" style="min-height:calc(100vh - 40px)">
                <div slot="header" class="clearfix">
                    <span>菜单树</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @@click="table.search.vm.parentId=null;findList();getTree();">查看一级</el-button>
                </div>
                <el-tree show-checkbox node-key="key"
                         @@node-click="(row)=>{table.search.vm.parentId=row.key;findList()}"
                         :data="tree.treeData" :props="defaultProps"
                         :default-expanded-keys="tree.defaultExpandedKeys"
                         :default-checked-keys="tree.defaultCheckedKeys" :expand-on-click-node="false">
                </el-tree>
            </el-card>

        </el-col>
        <el-col :xs="24" :sm="14" :md="19" :lg="19" :xl="19">

            <el-collapse-transition>
                <el-card class="w100 mb-15" shadow="never" :body-style="{padding:0}" v-show="table.search.state">
                    <el-row :gutter="15" class="p-15">
                        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" class="pb-15">
                            <el-input v-model="table.search.vm.name" placeholder="菜单名称" />
                        </el-col>
                        <!--button-->
                        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="float: right">
                            <el-button type="primary" @@click="searchEvent">查询</el-button>
                            <el-button @@click="onResetSearch">重置</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-collapse-transition>
            <el-card class="w100" shadow="never" :body-style="{padding:0}">
                <el-row :gutter="15" class="p-15 pb-0">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15">
                        <template v-if="power.search">
                            <el-button @@click="table.search.state=!table.search.state">
                                <i class="el-icon-arrow-up" v-if="table.search.state"></i>
                                <i class="el-icon-arrow-down" v-else></i>
                                检索
                            </el-button>
                        </template>
                        <template v-if="power.insert">
                            <el-button type="primary" icon="el-icon-plus" @@click="info()">
                                新建
                            </el-button>
                        </template>
                        <template v-if="power.delete">
                            <el-button type="danger" icon="el-icon-delete" @@click="deleteList()">
                                批量删除
                            </el-button>
                        </template>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15 text-right">
                        <el-dropdown>
                            <el-button icon="el-icon-arrow-down">
                                更多操作
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <span @@click="exportExcel"> 导出 Excel</span>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <span @@click="exportExcel"> 导出 Pdf</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <el-table :data="table.data" row-key="id" @@selection-change="(array)=>{table.selectedRowKeys=array;}" @@row-dblclick="row_dblclick" size="medium">
                    <el-table-column type="index" width="50" fixed></el-table-column>
                    <el-table-column type="selection" width="50" fixed></el-table-column>
                    <!--根据查询接口自动加载头部信息 start-->
                    <el-table-column prop="number" label="编号" width="50"></el-table-column>
                    <el-table-column prop="name" label="菜单名称" width="150"></el-table-column>
                    <el-table-column prop="url" label="菜单地址"></el-table-column>
                    <el-table-column prop="父级菜单" label="父级菜单" width="150"></el-table-column>
                    @*<el-table-column prop="icon" label="菜单图标" width="200"></el-table-column>*@
                    <el-table-column prop="isShow" label="是否显示" width="100"></el-table-column>
                    <!--<el-table-column v-for="(item,index) in table.columns"
                                     :prop="item.fieldName"
                                     :label="item.title"
                                     :key="index"
                                     :width="item.width"
                                     v-if="item.show">
                    </el-table-column>-->
                    <!--根据查询接口自动加载头部信息 end-->
                    <el-table-column fixed="right" label="操作" width="100" v-if="power.update || power.delete">
                        <template slot-scope="scope">
                            <el-link type="primary" @@click="info(scope.row.id)" v-if="power.update">
                                编辑
                            </el-link>
                            <el-link type="danger" @@click="deleteList(scope.row.id)" v-if="power.delete">
                                删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @@size-change="(val)=>{table.rows=val;findList();}"
                               @@current-change="(val)=>{table.page=val;findList();}" :current-page="table.page"
                               :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.rows"
                               layout="total, sizes, prev, pager, next, jumper" :total="table.total" class="mt-15 ml-15 mb-15">
                </el-pagination>
            </el-card>

        </el-col>
    </el-row>
</div>